<template>
  <div style="width: 100%;" ref="TmapDivRef">
    <div  id="TmapDiv" style="width:700px; height:600px;"></div>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue';
import router from '@/router'
defineComponent({ name: 'TmapDiv' })

const message = useMessage() // 消息弹窗

//地图变量
const map=ref(null);
const geocode=ref(null);
const zoom=ref(12);
const lat=ref(116.40969)
const lng=ref(39.89945)
// 初始化天地图
const initwxMap = () => {
    map.value = new T.Map('TmapDiv');
    // 坐标
    map.value.centerAndZoom(new T.LngLat(116.40969,39.89945), 12);
    //创建对象
    geocode.value = new T.Geocoder();
    // 地图类型
    map.value.setMapType(TMAP_HYBRID_MAP);
    // 注册点击事件
    map.value.addEventListener('click', (e) => {
      geocode.value.getLocation(e.lnglat, searchResult);
      // 这里假设e.lnglat是包含经纬度的对象  
      if (e.lnglat) {
        console.log('纬度：', e.lnglat.lat, '经度', e.lnglat.lng,);
        
      }
    });
    const searchResult = (result) => {
      if (result.getStatus() == 0) {
        var addressComponent = result.getAddressComponent();
        console.log('addressComponent',addressComponent);
        
      }
    };
}
// 选择绘画类型
const draw=ref()
const setLay = (type,arr)=>{
  if(type==='marker'){
    draw.value=new T.Marker(new T.LngLat(116.404, 39.915)); // 创建点
  }else if(type==='polyline'){
    draw.value = new T.Polyline([
        new T.LngLat(116.399, 39.910),
        new T.LngLat(116.405, 39.920),
        new T.LngLat(116.425, 39.900),
        new T.LngLat(116.387112,39.920977),
        new T.LngLat(116.385243,39.913063),
        new T.LngLat(116.394226,39.917988),
        new T.LngLat(116.401772,39.921364),
        new T.LngLat(116.41248,39.927893),
        new T.LngLat(116.399, 39.910),
    ], {color:"blue", weight:2, opacity:0.5});   //创建折线
  }else if(type==='circle'){
    let lnglat= new T.LngLat(116.394226,39.917988);
    draw.value = new T.Circle(lnglat,3500,{color:"blue",weight:3,opacity:1,fillColor:"#FFFFFF",fillOpacity:0}); //创建圆
  }else if(type==='polygon'){
    draw.value = new T.Polygon([
        new T.LngLat(116.387112,39.920977),
        new T.LngLat(116.385243,39.913063),
        new T.LngLat(116.394226,39.917988),
        new T.LngLat(116.401772,39.921364),
        new T.LngLat(116.41248,39.927893)
    ], {color:"blue", weight:2, opacity:0.5});  //创建多边形
  }else if(type==='rectangle'){
    let pStart = new T.LngLat(116.392214,39.918985);
    let pEnd = new T.LngLat(116.41478,39.911901);
    draw.value = new T.Polygon([
        new T.LngLat(pStart.lng,pStart.lat),
        new T.LngLat(pEnd.lng,pStart.lat),
        new T.LngLat(pEnd.lng,pEnd.lat),
        new T.LngLat(pStart.lng,pEnd.lat)
    ], {color:"blue", weight:2, opacity:0.5});  //创建矩形
  }else{
    return false
  }
  addOverLay(draw.value)
}
//添加覆盖物
const addOverLay=(circle)=>{
  map.value.addOverLay(circle);
};
 //清除覆盖物
const removeOverlay=()=>{
  map.value.clearOverLays();
}
defineExpose({ initwxMap,setLay,removeOverlay }) // 提供 setLay 方法，用于渲染数据
onMounted(() => {
  initwxMap()
})
</script>

<style scoped>
.earthquakeServer-trigger {
  padding: 20px;
}
</style>
